import defaultSettings from '@/settings'
import { ThemeEnum } from '@/enums/ThemeEnum'
import Color from 'color'

type SettingsValue = boolean | string

export const useSettingsStore = defineStore('setting', () => {
	// 是否显示设置
	const settingsVisible = ref(false)
	// 是否显示标签视图
	const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView)
	// 是否显示侧边栏logo
	const sidebarLogo = useStorage<boolean>(
		'sidebarLogo',
		defaultSettings.sidebarLogo
	)
	// 是否固定头部
	const fixedHeader = useStorage<boolean>(
		'fixedHeader',
		defaultSettings.fixedHeader
	)
	// 布局模式：left-左侧模式(默认) top-顶部模式 mix-混合模式
	const layout = useStorage<string>('layout', defaultSettings.layout)
	// 主题颜色
	const themeColor = useStorage<string>(
		'themeColor',
		defaultSettings.themeColor
	)
	// 主题：light-亮色(默认) dark-暗色
	const theme = useStorage<string>('theme', defaultSettings.theme)
	// 是否开启水印
	const watermarkEnabled = useStorage<boolean>(
		'watermarkEnabled',
		defaultSettings.watermarkEnabled
	)

	watch(
		[theme, themeColor],
		([newTheme, newThemeColor], [oldTheme, oldThemeColor]) => {
			if (newTheme !== oldTheme) {
				if (newTheme === ThemeEnum.DARK) {
					document.documentElement.classList.add('dark')
				} else {
					document.documentElement.classList.remove('dark')
				}
			}

			if (newThemeColor !== oldThemeColor) {
				const rootStyle = document.documentElement.style
				rootStyle.setProperty(`--el-color-primary`, newThemeColor)
				rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor)

				for (let i = 1; i < 10; i++) {
					rootStyle.setProperty(
						`--el-color-primary-light-${i}`,
						`${Color(newThemeColor).alpha(1 - i * 0.1)}`
					)
				}
			}
		},
		{
			immediate: true // 立即执行，确保在侦听器创建时执行一次
		}
	)

	const settingsMap: Record<string, Ref<SettingsValue>> = {
		fixedHeader,
		tagsView,
		sidebarLogo,
		layout,
		watermarkEnabled
	}

	function changeSetting({
		key,
		value
	}: {
		key: string
		value: SettingsValue
	}) {
		const setting = settingsMap[key]
		if (setting) {
			setting.value = value
		}
	}

	/**
	 * 切换主题
	 */
	function changeTheme(val: string) {
		theme.value = val
	}

	/**
	 * 切换主题颜色
	 *
	 * @param color 主题颜色
	 *
	 */
	function changeThemeColor(color: string) {
		themeColor.value = color
	}

	/**
	 * 切换布局
	 */
	function changeLayout(val: string) {
		layout.value = val
	}

	return {
		settingsVisible,
		tagsView,
		fixedHeader,
		sidebarLogo,
		layout,
		themeColor,
		theme,
		watermarkEnabled,
		changeSetting,
		changeTheme,
		changeThemeColor,
		changeLayout
	}
})
